<template>
  <el-table :data="orderList" style="width: 100%" border>
    <el-table-column fixed prop="index" label="序号" width="100" align="center" header-align="center" />
    <el-table-column prop="user_name" label="下单用户" width="80" align="center" header-align="center" />
    <el-table-column label="菜品信息" width="720" show-header="false" align="center" header-align="center">
      <template #default="{ row }">
        <el-table :data="row.dishes" style="width: 100%">
          <el-table-column prop="dish_name" />
          <el-table-column width="200" show-headers="false">
            <template #default="{ row }">
              <el-image :src="row.dish_img" style="width: 80px; height: 80px;" />
            </template>
          </el-table-column>
          <el-table-column prop="dish_price" :formatter="formatPrice" />
          <el-table-column prop="dish_count" :formatter="formatDishCount" />
          <el-table-column prop="dish_total_price" :formatter="formatPrice" />
        </el-table>
      </template>
    </el-table-column>
    <el-table-column prop="order_time" label="下单时间" :formatter="formatTime" width="200" align="center"
      header-align="center" />
    <el-table-column prop="order_total_price" label="总计" width="100" align="center" header-align="center" />
    <el-table-column prop="order_flavor" label="口味" width="120" align="center" header-align="center" />


    <el-table-column fixed="right" label="Operations" width="220" align="center" header-align="center">
      <template #default="{ row }">
        <el-button type="danger" size="small" @click="deleteOrder(row)">删除</el-button>
        <el-button type="primary" size="small">Edit</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="my-page">
    <el-pagination background v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
      :page-sizes="[2, 4, 8, 10, 12, 15, 16, 20, 25]" @current-change="handleCurrentChange"
      @size-change="handleSizeChange" layout="sizes, prev, pager, next" :hide-on-single-page="false" />
  </div>
  <audio ref="myAudio" style="opacity: 0;"></audio>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import http from '@/utils/http'
import { ElMessageBox, ElMessage } from 'element-plus'
// const audioFile = require('@/assets/newOrder.mp3')
// console.log(audioFile)
const myAudio = ref<HTMLAudioElement | null>(null)
let lastOrderId = -1

onMounted(() => {
  // const audio = myAudio.value
  // console.log(audio)
  if (myAudio.value != null) {
    myAudio.value.src = require('@/assets/newOrder.mp3')
    myAudio.value.controls = true

  }

  getOrder()
  // 轮询
  hasNewOrder()
  setInterval(() => {
    hasNewOrder()
  }, 8000)
})
// 上次订单id

// 音频播放
const audioPlay = ref(false)
// 当前页数
const currentPage = ref(1)
// 菜品总数
const total = ref(100)
// 分页数据，也就是一页的数量
const pageSize = ref(2)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getOrder()
}
// 监听播放
watch(audioPlay, (newValue, oldValue) => {
  // console.log(newValue,oldValue)
  if (newValue && !oldValue) {
    console.log('当前为true,执行播放');
    myAudio.value?.play()
  }
})
// 当前currentchange发生变化
const handleCurrentChange = (val: number) => {
  console.log('当前发生了变化', val);
  currentPage.value = val
  getOrder()
}



// 格式化数量
const formatPrice = (row: any, column: any, cellValue: string) => {
  return `${cellValue}￥`;
}
// 格式化价格
const formatDishCount = (row: any, column: any, cellValue: string) => {
  // console.log(row, column, cellValue);
  return `x ${cellValue}`;
}
// 格式化时间
const formatTime = (row: any, column: any, cellValue: string) => {
  const times = cellValue.split('T').join('-')
  return times
}
// 定义列表
const orderList = ref([
  {
    id: 1,
    order_total_price: 330,
    user_name: 'aa',
    order_time: '2023-4-20',
    order_flavor: '香辣',
    dishes: [
      {
        dish_id: 2,
        dish_name: '烤全羊',
        dish_img: 'http://127.0.0.1:8000/media/dishes/l.png',
        dish_price: 255,
        dish_count: 4,
        dish_total_price: 1000
      },
      {
        dish_id: 1,
        dish_name: '烤乳猪',
        dish_img: 'http://127.0.0.1:8000/media/dishes/l.png',
        dish_price: 255,
        dish_count: 4,
        dish_total_price: 1000
      }
    ]
  }
])


const getOrder = () => {
  http.get(`/admin/order?page=${currentPage.value}&page_size=${pageSize.value}`).then(res => {
    console.log(res.data.order_list)
    const data = res.data.order_list.map((item: any, index: number) => {
      item['index'] = (currentPage.value - 1) * pageSize.value + index + 1
      return item
    })
    // console.log(res)
    orderList.value = data
    total.value = parseInt(res.data.order_count)
    currentPage.value = parseInt(res.data.page_num)
    pageSize.value = parseInt(res.data.page_size)
  })
}

const deleteOrder = (row: any) => {
  // 解构赋值并重命名
  const { user_name, order_id: id } = row
  ElMessageBox.confirm(
    `确定要删除${user_name}的这条订单吗`,
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      http.delete('/admin/order', {
        data: {
          id: id
        }
      }).then(() => {
        ElMessage({
          type: 'success',
          message: `${user_name} 的订单删除成功`,
        })
        getOrder()
      }).catch(() => {
        ElMessage({
          type: 'error',
          message: '订单删除失败',
        })
      })


    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
// 轮询查询是否有新订单
const hasNewOrder = () => {
  http.get(`/admin/hasNew?orderId=${lastOrderId}`).then(res => {
    console.log('change', res.data.change)
    const flag = res.data?.change
    // 发生了变化就再次请求当前页面
    if (flag) {
      console.log('当前您有新订单');
      lastOrderId = res.data.lastId
      getOrder()
      audioPlay.value = true
      // 播放音乐
    }
    // 只有在第一次返回时才会触发
    if (!flag && lastOrderId == -1) {
      lastOrderId = res.data.lastId
    }
  }).catch(e => {
    audioPlay.value = true
    console.log(e);
  })
}
</script>
<style lang="scss" scoped>
.el-table .el-table__row--striped:not(.el-table__row--expanded)>.el-table__cell {
  border-bottom: 1px solid #ebeef5;
}

.my-page {
  width: 100%;
  margin: 30px 30%;
}
</style>